<template>
  <div class="total-user">
    <div class="title">慕课外卖用户总数</div>
    <div class="sub-title">User Total Count</div>
    <div class="total">
      <count-to
        :start-val="startVal"
        :end-val="todayUser"
        :duration="1000"
        separator=","
        autoplay
      />
    </div>
    <div class="percent-text">
      <span class="percent-text-1">
        每日增长率:
        <count-to
          :start-val="startPercent"
          :end-val="growthLastDay"
          :duration="1000"
          :decimals="2"
          suffix="%"
        />
      </span>
      <span class="percent-text-2">
        每月增长率:
        <count-to
          :start-val="startPercent2"
          :end-val="growthLastMonth"
          :duration="1000"
          :decimals="2"
          suffix="%"
        />
      </span>
    </div>
    <div class="percent">
      <div class="percent-inner-wrapper">
        <div class="percent-inner" :style="{ width: `${growthLastDay}%` }" />
      </div>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, reactive, ref, watch, watchEffect } from "vue";

export default defineComponent({
  name: "TotalUsers",
  props: {
    totalUser: Number,
    growthLastDay: {
      type: Number,
      default: 0,
    },
    growthLastMonth: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    const startVal = ref(0);
    const startPercent = ref(0);
    const startPercent2 = ref(0);

    
   

    const updateStartVal = () => {
      startVal.value =  props.todayUser;
      startPercent.value = props.growthLastDay;
      startPercent2.value = props.growthLastMonth;
    };
    return {
      startVal,
      startPercent,
      startPercent2,
      updateStartVal,

     
   
    };
  },
});
</script>

<style lang="less">
.total-user {
  width: 100%;
  height: 100%;
  background: #424446;
  color: #fff;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
  padding: 20px 40px;
  box-sizing: border-box;
  .title {
    font-size: 32px;
  }
  .sub-title {
    font-size: 16px;
    letter-spacing: 1px;
    margin-top: 10px;
  }
  .total {
    font-family: DIN;
    font-size: 68px;
    font-weight: bolder;
    letter-spacing: 2px;
    padding: 10px 0;
  }

  .percent-text {
    font-size: 28px;
    font-family: DIN;
    letter-spacing: 2px;

    .percent-text-1 {
      color: rgb(197, 251, 121);
    }

    .percent-text-2 {
      color: rgb(99, 169, 0);
      margin-left: 10px;
    }
  }

  .percent {
    width: 100%;
    height: 20px;
    box-sizing: border-box;
    border: 1px solid #fff;
    margin-top: 10px;

    .percent-inner-wrapper {
      height: 100%;
      padding: 2px;
      box-sizing: border-box;
      overflow: hidden;

      .percent-inner {
        height: 100%;
        background: rgb(150, 150, 150);
        transition: all 1s linear;
      }
    }
  }
}
</style>
